<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css背景颜色</title>

    <style>

        div{
            width: 450px;
            height: 450px;

        }

        hr{
           background-color: red;
            border: none;
            height: 1px;

        }

        #div1{

            background-color: #8cebff;
            background-color: rgba(0,0,0,1);
        }

        #div2{

            background-image: url("http://wx2.sinaimg.cn/large/006I1bcHly1g60mwo2st6j30cw0det9j.jpg");
        }



        #div3{

            width: 100%;
            background-image: url("http://wx2.sinaimg.cn/large/006I1bcHly1g60mwo2st6j30cw0det9j.jpg");
            background-repeat: repeat-x;

        }

        #div4{

            width: 100%;
            height: 600pt;
            background-image: url("http://wx2.sinaimg.cn/large/006I1bcHly1g60mwo2st6j30cw0det9j.jpg");
            background-repeat: no-repeat;
           /*background-position: right top;*/
           /* background-position: center;*/
           /* background-position: 300px 100px;*/

            background-position: 50% 30%;
        }



    </style>


</head>
<body>

<h2>设置背景颜色</h2>
<hr>
<div id="div1"></div>

<h2>设置背景图片</h2>
<hr>
<div id="div2"></div>

<h2>设置背景图片,且在x方向平铺</h2>
<hr>
<div id="div3"></div>


<h2>定位右上角,不平铺</h2>
<hr>
<div id="div4"></div>
<hr>


</body>
</html>